<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片的移动</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
    </style>
    <script>
        var tops = 0;
        var lefts = 0;
        var _down = true;
        var _r = true;
        var myimg = function () {
            var img = document.getElementById("p2");
              if (_down){

             if (tops<document.documentElement.clientHeight-330)
             {
             img.style.top=tops++ +"px";
             }
             else{
             _down = false;
             img.style.top=--tops +"px";
             }

             }else{
             if (tops>=0){
             img.style.top=tops-- +"px";

                 if (_r) {
                     if (lefts < document.documentElement.clientWidth - 263) {
                         img.style.left = lefts++ + "px";
                     }
                     else {
                         _r = false;
                         img.style.left = lefts-- + "px";
                     }
                 } else {
                     if (lefts >= 0) {
                         img.style.left = lefts-- + "px";
                     }
                     else {
                         _r = true;
                         img.style.left = lefts++ + "px";
                     }

                 }

             }
             else{
             _down = true;
             img.style.top=tops++ +"px";
             }

             }

            if (_r) {
                if (lefts < document.documentElement.clientWidth - 263) {
                    img.style.left = lefts++ + "px";
                }
                else {
                    _r = false;
                    img.style.left = lefts-- + "px";
                }
            } else {
                if (lefts >= 0) {
                    img.style.left = lefts-- + "px";
                }
                else {
                    _r = true;
                    img.style.left = lefts++ + "px";
                }

            }

           // console.debug(lefts + ":" + tops);//控制台打印，方便调试
            // var con = document.getElementById('ttt');
            // con.innerText += tops + ':' + lefts + ';';
        };

        window.onload = function () {
            myimg();

            var a1a =window.setInterval(myimg, 10);
            //悬停停止
            document.getElementById("p2").onmouseover = function(){
                window.clearInterval(a1a);
            };
            //放手继续运动
            document.getElementById("p2").onmouseout = function(){
                a1a =window.setInterval(myimg,10);
            };
        };

    </script>
</head>
<body>

<div id='p2'
     style='position:absolute;
         left:0;top:0;
         width: 263px;height: 330px;
         background: url("../img/q1.png");
'>

</div>
<div id='ttt'></div>
</body>
</html>